<!-- 
	u-parse 链接跳转说明：
	H5、App（含NVUE）外链可以直接打开，小程序端将自动复制链接
	小程序端a标签设置app-id后可以跳转到其他小程序
	例如：
	<a href="#">跳转到顶部</a>
	<a href="#list">跳转到列表</a>
	<a href="https://www.baidu.com">外部链接</a>
	<a href="/webview/pages/index">内部链接</a>
	
	将原本是外链的富文本处理成内部链接形式，如下正则处理
	// #ifdef APP || H5
	content = content.replace(/href=\"(.*?)\"/gim,(match,href)=> {
		//将‘://’替换一个字符串（u-parse中外链跳转是根据‘://’跳转的，现在是要将外链跳转改为内部跳转）
		href = href.replace('://','jpxx')
						
		//去除链接两端的空格
		href = href.replace(/^\s+|\s+$/g,'')
						
		return `href="/webview/pages/index?content=${encodeURIComponent(href)}"`
	})
	// #endif
	 -->
<template>
	<view class="text" :style="web_style">
		<rich-text v-if="mode=='rich-text'" class="text-content-mini" :nodes="content"></rich-text>
		<u-parse v-else-if="mode == 'html'" class="text-content-mini" :scrollTable="true" :content="content"
			:tagStyle="tagStyle" :lazyLoad="true" :useAnchor="true" @linkTap="onLinkTap"></u-parse>
		<text v-else-if="mode == 'text'">{{ content }}</text>
		<web-view v-else-if="mode == 'url'" :src="content" @message="onMessage"></web-view>
	</view>
</template>

<script>
	export default {
		name: "pb-web",
		props: {
			content: {
				type: String,
				require: true
			},
			mode: {
				type: String,
				require: false,
				default: "rich-text", //html、text、url
			},
			tagStyle: {
				type: Object,
				require: false, //{table: 'width:100%;',tr: 'width:80%;',td: 'font-size:10rpx!important;',p: 'font-size:20rpx;!important;',span: 'font-size:16rpx!important;',}
			},
			navigateBackToPath: { // 例如：symptomAssessment/pages/index
				type: String,
			},
			messageHandle: {
				type: Function,
			},
			webStyle: {
				type: [String,Object]
			}
		},
		data() {
			return {
				web_style: null,
			}
		},
		watch: {
			webStyle: {
				handler(newVal) {
					if(newVal) {
						if(newVal instanceof Object) {
							this.web_style = uni.$u.addStyle(newVal,'string')
						}else {
							this.web_style = newVal
						}
					}else {
						this.web_style = ""
					}
				},
				immediate: true
			}
		},
		mounted() {
			// #ifdef H5
			window.removeEventListener('message', this.onH5Message)
			window.addEventListener('message', this.onH5Message)
			// #endif
		},
		destroyed() {
			// #ifdef H5
			window.removeEventListener('message', this.onH5Message)
			// #endif
		},
		methods: {
			onLinkTap(obj) {
				// {"href":"xxxxxx","rel":"noopener noreferrer","target":"_blank","style":"color:rgb(0, 0, 255)"}
			},
			async onH5Message(e) {
				console.log('【pb-web】onH5Message=>' + JSON.stringify(e.data))
				// uni.postMessage调用返回值
				if (e.data && e.data.data && e.data.data.name && e.data.data.name == 'postMessage') {
					if (this.messageHandle && typeof(this.messageHandle) === 'function') {
						await this.messageHandle.call(uni.$u.$parent.call(this),e.data.data.arg, 'onH5Message')
					}else {
						this.$emit('message', e.data.data.arg, 'onH5Message')
					}
					// h5页面如果被重定向后返回需要再返回一次才能全部返回
					let url = e.data.data.arg.url
					if (url && url.includes("postMessage.html")) {
						this.back()
					}
				} else if (e.data && e.data.url && e.data.url.includes("postMessage.html")) {
					// parent.postMessage 调用的返回值
					if (this.messageHandle && typeof(this.messageHandle) === 'function') {
						await this.messageHandle.call(uni.$u.$parent.call(this),e.data.parameters, 'onH5Message')
					}else {
						this.$emit('message', e.data.parameters, 'onH5Message')
					}
					this.back()
				}
			},
			onMessage(data) {
				console.log('【pb-web】onMessage=>' + JSON.stringify(data.detail.data))
				if (data.detail.data && data.detail.data.length > 0) {
					if (this.messageHandle && typeof(this.messageHandle) === 'function') {
						this.messageHandle.call(uni.$u.$parent.call(this),data.detail.data[0], 'onMessage')
					}else {
						this.$emit('message', data.detail.data[0], 'onMessage')
					}
				}
			},
			back() {
				setTimeout(() => {
					var delta = 1
					if (this.navigateBackToPath) {
						delta = getCurrentPages().reverse().findIndex(item => item.route === this
							.navigateBackToPath)
						if (delta >= 1) {
							uni.navigateBack({
								delta: delta,
								complete: () => {
									setTimeout(() => {
										//检查一下有没有返回成功（诺没有返回成功，需要将返回页码+1，iOS某个版本需要一次返回2个页面才行）
										let delta2 = getCurrentPages().reverse().findIndex(
											item => item.route === this.navigateBackToPath)
										if (delta2 >= 1) {
											uni.navigateBack({
												delta: delta2 + 1
											})
										}
									}, 100)
								}
							})
						}
					} else {
						uni.navigateBack({
							delta: delta,
						})
					}

				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		background-color: white;
		padding: 32rpx;
		width: 100%;
		height: 100%;
	}
</style>